<template>
  <div class="home">
    <el-container>
      <!-- Header -->
      <el-header>
        <el-row type="flex" class="row-bg" justify="space-between">
          <!-- logo -->
          <el-col :span="5">
            <div class="logo">
              <el-image
                style="width: 100px; height: 60px"
                :src="url"
                fit="scale-down"
              ></el-image>
              <span>超级管理系统</span>
            </div>
          </el-col>
          <!-- loginOut -->
          <el-col :span="5" class="d-flex justify-flex-end align-items-center">
            <el-avatar
              class="mr-1"
              size="large"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <span class="mr-1">{{ username }}</span>
            <el-button
              @click="loginout"
              type="primary"
              icon="el-icon-switch-button"
              >退出</el-button
            >
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <!-- 导航栏 -->
        <el-aside width="200px">
          <el-menu
            :router="true"
            :unique-opened="true"
            class="el-menu-vertical-demo"
          >
            <el-submenu
              :index="index.toString()"
              v-for="(item, index) in tablist.data"
              :key="item.id"
            >
              <template #title>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item-group
                v-for="item2 in item.children"
                :key="item2.id"
                @click="send(item2)"
              >
                <template #title>{{ item2.authName }}</template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import router from "@/router/index";
import { menu } from "@/utils/api";
export default {
  setup() {
    //   logo
    const url = ref(require("@/assets/images/logo.jpg"));
    //   左侧导航栏列表
    const loginout = () => {
      window.localStorage.clear("token");
      router.push("/login");
    };
    //使用vuex 获取用户名字
    const username = localStorage.getItem("username");
    // 获取左侧菜单
    const tablist = reactive({
      data: "",
    });
    const menus = async () => {
      const { data: res } = await menu();
      tablist.data = res.data;
    };
    menus();
    const send = (item) => {
      router.push('/' + item.path)
    }
    return {
      url,
      tablist,
      loginout,
      username,
      send
    };
  },
};
</script> 

<style scoped lang="scss">
.el-header {
  background-color: #f7fcf6;
}
.el-row {
  height: 100%;
}
.logo {
  height: 100%;
  display: flex;
  align-items: center;
}
.el-menu-item-group{
  cursor: pointer;
}
</style>